<template>
  <div style="height: 100%;background-color:white ;padding: 10px">
    <el-row>
      <el-col :span="24" style="right: auto">
        <div>
          <!--    <el-button size="small" type="success" @click="getMessage()"> word解析</el-button>-->
          <div style="width: 430px; float: right">
            <el-input v-model="name" placeholder="请输入活动名称" size="small" @keyup.enter.native="getTableData">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <el-button slot="append" :icon="appendIcon" @click="switchAppend"></el-button>
            </el-input>
          </div>
          <div v-if="showAdvance" id="advance" style="padding: 10px; float: right">

            <div style="width: 100px;text-align:right; display: inline-block">
              <span>知识库</span>
            </div>
            <div style="display: inline-block">
              <el-select v-model="selectedLib" clearable filterable placeholder="请选择所属知识库" size="small"
                         style="width: 300px">
                <el-option v-for="item in $store.state.knowledgeLibList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div style="width: 100px;text-align:right; display: inline-block;margin-top: 10px">
              <span>活动负责人</span>
            </div>
            <div style="display: inline-block;width: 300px">
              <el-input v-model="created_by" placeholder="请输入活动负责人" size="small">
              </el-input>
            </div>
            <div style="margin-top: 60px; right: 10px;">
              <el-row>
                <el-col :offset="7" :span="9">
                  <div style="margin-left: 90px;height: 32px; width: 88px;">
                    <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
                  </div>
                </el-col>
                <el-col :offset="0.8" :span="2">
                  <div div style="margin-left: 5px;height: 32px; width: 88px;">
                    <el-button size="small" type="success" v-on:click="replacement">重 置</el-button>
                  </div>
                </el-col>
                <el-col :offset="2" :span="2">
                  <div div style="margin-left: 5px;height: 32px; width: 88px;">
                    <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div>
        <el-table :data="tableData" :height="tableHeight" border stripe style="width: 100%;margin-top: 10px">
          <el-table-column label="活动名称" min-width="300" prop="name">
            <template slot-scope="scope">
              <span v-html="scope.row.name"></span>
            </template>
          </el-table-column>
          <el-table-column label="知识库" min-width="100" prop="knowledgeLibName"></el-table-column>
          <el-table-column :formatter="UTIL.dateFormat" label="更新时间" min-width="160"
                           prop="updatedTime"></el-table-column>
          <el-table-column label="包含稿件数" min-width="150" prop="manuscriptNum">
          </el-table-column>
          <el-table-column label="活动负责人" min-width="150"
                           prop="createdBy">
            <template slot-scope="scope">
              <span v-if="scope.row.createdBy!=null"
                    v-html="$store.state.userList.find(user => user.userName === scope.row.createdBy).name"></span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="200">
            <template slot-scope="scope">
              <span><el-link type="success"
                             @click.prevent="detail(scope.row.id,scope.row.knowledgeLibId)">详情</el-link></span>
              <span><el-link type="success"
                             @click="edit(scope.row.id)">分配负责人</el-link></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-row>
    <el-row>
      <div style="margin-top: 10px">
        <el-pagination
          v-if="multiplePages"
          :page-size="pageSize"
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          :total="totalNum"
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="text-align: right;"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"></el-pagination>
      </div>
    </el-row>

    <el-dialog :visible.sync="dialogVisible" title="分配负责人" width="500px" @click="closeNewDialog">
      <el-row>
        <el-col :span="6">
          <span class="label">分配负责人<em style="color: red">*</em></span>
        </el-col>
        <el-col :span="18">

          <el-select v-model="userName" filterable placeholder="请选择" style="width: 300px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeNewDialog">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "ActivityListTable",
  data() {
    return {
      tableData: [],
      multiplePages: true,
      appendIcon: "el-icon-caret-bottom",
      noData: true,
      totalNum: 0,
      showAdvance: false,
      currentPage: 0, // 第几页
      pageSize: 10, // 每页显示的数据个数
      name: '',
      selectedLib: '',
      dialogVisible: false,
      userName: '',
      options: [],
      tableHeight: '',
      activityId: "",
      created_by: ''
    }
  },
  methods: {
    detail(id, knowledgeLibId) {
      this.$router.push({
        path: '/activity/detail',
        query: {
          knowledgeLibId: knowledgeLibId,
          id: id,
          detailType: 'all'
        }
      })
    },
    confirm() {
      let param = new URLSearchParams();
      param.append("userName", this.userName)
      param.append("activityId", this.activityId)

      this.axios.post("/pmph/action/activity/updateUser", param).then((response) => {
        this.getTableData()
        this.closeNewDialog()
      })
    },
    getMessage() {
      this.axios.get("/pmph/action/activity/getMessage", {
        params: {}
      }).then((response) => {
      })
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    handleCurrentChange: function (val) {
      this.currentPage = val - 1;
      this.getTableData();
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.getTableData()
    },
    advanceCancel() {
      this.showAdvance = false;
    },
    replacement: function () {
      this.name = ''
      this.selectedLib = ''
      this.created_by = ''
    },
    advanceConfirm() {
      this.getTableData();
      this.showAdvance = false;
    },
    closeNewDialog() {
      this.dialogVisible = false
      this.userName = ''
    },
    edit(id) {
      this.dialogVisible = true
      this.activityId = id;
    },
    getTableData() {
      this.axios.get("/pmph/action/activity/selectTableData", {
        params: {
          name: this.name,
          knowledgeLibId: this.selectedLib,
          createdBy: this.created_by,
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          status: 'all'
        }
      }).then((response) => {
        this.totalNum = response.data.total;
        this.tableData = response.data.records
      })
    }
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 150;
    this.getTableData()
    this.axios.get("/pmph/action/UserCtrl/selectUserName", {
      params: {}
    }).then((response) => {
      this.options = response.data
    })
  }
}
</script>

<style scoped>

</style>
